<template>
  <div
      class="toast hide"
      v-if="show"
      :class="{'toast-normal':this.position === 'normal',
        'toast-top':this.position === 'top',
        'toast-bottom':this.position === 'bottom',}"
  >
    <span>{{ content }}</span>
  </div>
</template>

<script>

export default {
  name: "toast",
  components: {},
  props: {
    // Toast 内容
    content: {
      type: String,
      default: 'Toast提示'
    },
    // Toast 是否展示
    show: {
      type: Boolean,
      default: false
    },
    // 持续时间
    duration: {
      type: Number,
      default: 2000
    },
    // 位置 中间 / 上方 / 下方
    position: {
      type: String,
      default: 'normal'
    }
  },
  data() {
    return {

    }
  },
  created() {
    console.log('在这注册组件，未完成')
  }
}
</script>

<style scoped>
.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .2rem .4rem;
  border-radius: .2rem;

  color: #fff;
  background-color: #4a4a4b;
  font-size: .4rem;
}

.toast-normal {
  top: 50%;
}

.toast-top {
  top: 20%;
}

.toast-bottom {
  top: 80%;
}

.hide {
  animation: hidetip 4s 1;
  animation-fill-mode: forwards;
}

@keyframes hidetip {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>